<template>
	<w-container>
		<view class="plr-16 ptb-10">
			<view class="bg-color-item br-12 pa-16">
				<view class="font-size-16 font-w-500 mb-12">支付方式</view>
				<view class="flex flex-js-sb mlr-8" v-for="item in basePayList" :key="item.icon" >
				    <view class="flex flex-ai-center">
				        <!-- <w-icon size="18" :name="item.icon"></w-icon> -->
				        <text :class="item.able && item.check ? 'font-color-textPrimary' : 'font-color-999'">{{ item.name }}</text>
				    </view>
				    <w-icon v-if="item.able && item.check" name="check-icon" size="18"></w-icon>
				    <w-button v-if="!item.able" size="mm" shape="circle" :disabled="!userInfo.real_name_authentication" @click="$u.route('/pages/wallet/wallet')">去开通</w-button>
				</view>
			</view>
			<view class="bg-color-item br-12 pa-16 mt-12">
				<view class="font-size-16 font-w-500">购买数量</view>
				<view class="font-size-12" style="color: #9a9a9a;">期望购买的最大数量</view>
				<input type="digit" v-model="form.num" @input="changenum" placeholder="请输入购买数量" class="font-size-20 mt-20" />
			</view>	
			<view class="bg-color-item br-12 pa-16 mt-12">
				<view class="font-size-16 font-w-500">购买单价</view>
				<view class="font-size-12" style="color: #9a9a9a;">请输入可接受的最高单价</view>
				<view class="flex flex-ai-center mt-20">
					<view class="font-size-20 font-w-500">￥</view>
					<input type="number" v-model="form.price" placeholder="请输入购买单价" class="font-size-20 " />
				</view>
			</view>	
		</view>
		<view class="fix-btn bg-color-white">
			<view class="" >
				<w-button :disabled="disabled" class="br-24" @click="checkVerifyStatus">
					<view class="flex flex-dir-col flex-ai-center">
						<view>立即购买</view>
						<view class="font-size-12 font-w-400" style="opacity: 0.7;">最高支付总额：{{ maxMoney }}元</view>
					</view>
				</w-button>
			</view>
			<!-- <u-status-bar></u-status-bar> -->
		</view>
		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='submit'></w-jy-verify>
	</w-container>
</template>

<script>
	import { basePayList } from "@/config/index.js";
	import { mapActions, mapState } from "vuex";
	
	import {
		getMarketGoodsInfo
	} from "@/api/market/index.js";
	import {
		bacthCreateOrder
	} from '@/api/order/index.js'
	export default {
		data() {
			return {
				basePayList,
				id:'',
				goodsType:'',
				product:{},
				form: {
					price: '',
					num: 1
				},
				immediate: true
			}
		},
		onLoad({id,goodsType}) {
			this.id = id
			this.goodsType = goodsType
			this.payTypeInit()
			this.getInfo()
		},
		computed:{
			disabled() {
				let able = this.form.price && this.form.num
				return !able
			},
			maxMoney(){
				return Number(this.form.price) * Number(this.form.num)
			},
			...mapState("config", {
			    captchaStatus(state) {
			        return !!Number(state.info.fastOrder_check);
			    },
			})
		},
		methods: {
			//初始化支付
			payTypeInit() {
			    this.basePayList = this.basePayList.map((v) => {
			        v.able = this.userInfo[v.auth_key];
			        v.check = v.able && v.pay_way == this.appConfig.default_pay_type;
			        return v;
			    });
			},
			checkVerifyStatus(){
				if(this.captchaStatus){
					this.$refs.captcha.showCaptcha();
					this.$emit('change',false)
				}else{
					this.submit();
				}
			},
			async getInfo() {
				try {
					let {
						data
					} = await getMarketGoodsInfo({
						id: this.id,
						type: this.goodsType
					});
					this.product = data;
					this.form.num = this.product.batch_pay_num
					this.product.goods_type = this.goodsType;
				} catch (err) {
					console.log(err)
				} finally {
					uni.stopPullDownRefresh();
					this.loading = false;
				}
			},
			submit(validate) {
				let {
					key,
					id
				} = this.product;
				
				if (!this.immediate) return;
				this.immediate = false
				bacthCreateOrder(Object.assign(this.form, {
					key,
					goods_id: id,
					...validate
				})).then(res => {
					this.immediate = false;
					uni.showToast({
						title: res.msg,
						success() {
							setTimeout(() => {
								uni.setStorageSync('order-list', {
									status: 0,
									type: 2
								})
								uni.redirectTo({
									url: '/pages/order/list'
								})
							}, 1500)
						}
					})
				}).catch(()=>{
					this.immediate = true
				})
			},
			changenum({
				detail
			}) {
				if (this.timer) clearTimeout(this.timer);
				let {
					value
				} = detail;
				if (!value) value = 1;
				value = parseInt(value);
				if (value < 1) value = 1
				if (value > this.product.batch_pay_num) value = this.product.batch_pay_num
				this.timer = setTimeout(() => {
					this.form.num = value
				}, 800)
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fix-btn {
		width: 100%;
		padding: 20rpx 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow: 0px -2px 28px 0px rgba(0,0,0,0.06);
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	}
	
	.pick-pay {
	    background: $item-bg-color;
	    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	}
</style>
